<template>
  <div class="userProfile">
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!--accept="image/png" 只接受图片格式是png-->
    <input
      type="file"
      hidden
      ref="file"
      accept="image/*"
      @change="onFileChange"
    />
    <van-cell title="头像" is-link center @click="$refs.file.click()">
      <van-image width="50" height="50" round fit="cover" :src="user.photo" />
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="user.name"
      @click="isEditNameShow = true"
    ></van-cell>
    <van-cell
      title="性别"
      is-link
      :value="user.gender === 0 ? '男' : '女'"
      @click="isEditGenderShow = true"
    ></van-cell>
    <van-cell
      title="生日"
      is-link
      :value="user.birthday"
      @click="isEditBirthdayShow = true"
    ></van-cell>

    <van-popup
      v-model="isEditNameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <!--当子组件的数据既要用又要修改时 ，这种情况下可以用v-model简写
    :name="user.name"
        @updatename="user.name = $event"
        v-model = "user.name"
        相当于:value="user.name"  默认传递一个名字叫value的数据
        监听input事件
        v-model 的本质还是父子组件通信，仅仅简化父子组件的使用
        v-model只能使用一次
        如果有多个数据要保持同步，使用.sync 修饰符
        :gender.sync = 'user.gender'
        ('update:a',0)
        v-if=“”就是相当于取消的时候销毁数据，下一次点击弹出层就是新的数据
    -->
      <updateName
        v-if="isEditNameShow"
        @close="isEditNameShow = false"
        v-model="user.name"
      />
    </van-popup>

    <van-popup v-model="isEditGenderShow" position="bottom">
      <updateGender v-model="user.gender" @close="isEditGenderShow = false" />
    </van-popup>

    <van-popup v-model="isEditBirthdayShow" position="bottom">
      <updateBirthday
        v-if="isEditBirthdayShow"
        v-model="user.birthday"
        @close="isEditBirthdayShow = false"
      />
    </van-popup>

    <van-popup
      class="updatePhotoPopup"
      v-model="isEditPhotoShow"
      position="bottom"
      style="height:100%"
    >
      <!--v-if 每次重新渲染-->
      <updatePhoto
        v-if="isEditPhotoShow"
        :file="previewImage"
        @close="isEditPhotoShow = false"
        @updatePhoto="user.photo = $event"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from "../api/user.js";
import updateName from "./updateName.vue";
import updateGender from "./updateGender.vue";
import updateBirthday from "./updateBirthday.vue";
import updatePhoto from "./updatePhoto.vue";
export default {
  name: "userProfile",
  data() {
    return {
      user: {}, // 用户
      isEditNameShow: false, //编辑昵称的显示状态
      isEditGenderShow: false, //编辑性别的显示状态
      isEditBirthdayShow: false, //编辑生日的显示状态
      isEditPhotoShow: false, //编辑头像的显示状态
      previewImage: null
    };
  },
  created() {
    this.loadUserProfile();
  },
  methods: {
    async loadUserProfile() {
      const { data } = await getUserProfile();
      //   console.log(data)
      this.user = data.data;
    },
    onFileChange() {
      this.isEditPhotoShow = true;
      // 在弹出层里面预览图片  固定的url
      // const blob = window.URL.createObjectURL(this.$refs.file.files[0]);
      // 要传一个对象才行
      const file = this.$refs.file.files[0];
      this.previewImage = file;
      // 为了解决相同文件不触发change事件，所以在这里手动清空file的value
      this.$refs.file.value = "";
    }
  },
  components: {
    updateName,
    updateGender,
    updateBirthday,
    updatePhoto
  }
};
</script>
<style scoped lang="less">
// 加整体颜色要在父组件里面加，因为它是最大的
.van-popup {
  background-color: #f5f7f9;
}
.updatePhotoPopup {
  background-color: #000;
}
</style>
